<template>

  <div style="position: absolute; height: 100%; width: 100%;">
    <el-row>
        <el-col :span="3" :offset="20" style="height: 60px; line-height: 60px;">
          <el-button size="small" @click="showAddVillage = true">添加村庄</el-button>
        </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" >


        <div>
          <el-table
              v-loading="listLoading"
              :data="list"
              element-loading-text="Loading"
              border
              fit
              highlight-current-row
            >

            <el-table-column align="center" label="单位名称" >
              <template slot-scope="scope">
                {{ scope.row.name }}
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>

          </el-table>
        </div>
      </el-col>
    </el-row>

    <el-dialog title="添加村庄" :visible.sync="showAddVillage">
    	<addVillage @closeDialog="showAddVillage = false" ></addVillage>
    </el-dialog>

  </div>
</template>

<script>
import { getList } from '@/api/table'
import request from '@/utils/request'
import addVillage from './components/addVillage.vue';

export default {
  components: {
  	addVillage
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      showAddVillage: false,
      list: null,
      listLoading: true,
      checkList: ['1','2']
    }
  },
  created() {
    this.getInstitutionList()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      this.list = [{name: '派出所'}, {name: '派出所'}, {name: '派出所'}, {name: '派出所'}];
      this.listLoading = false
    },
    getInstitutionList() {
      request({
        url: '/api/village/getVillageList',
        method: 'get',
        param: {}
      }).then((res) => {
        console.log(res)
        this.listLoading = true
        this.list = res.result;
        this.$message(res.resultCodeDesc)
        this.listLoading = false
      }).catch((err) => {

      })
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  }
}
</script>
<style scoped>
  html,body {
    height: 100%;
  }
</style>
